<!DOCTYPE html>
<html lang="zh">
<head>
  <meta name="keywords" content="闵行区教师专业发展数字化支持系统"/>
  <meta name="description" content="闵行区教师专业发展数字化支持系统"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

  <title th:text="#{cas.login.pagetitle}">上海市闵行区教师专业发展数字化支持系统</title>
  <!--    <link rel="stylesheet" th:href="@{#{webjars.fontawesomemin.css}}"/>-->
  <!--    <link type="text/css" rel="stylesheet" th:href="@{#{webjars.latomin.css}}"/>-->
  <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon"/>
  <link th:href="@{/css/antd.min.css}" href="../../static/css/antd.min.css" rel="stylesheet">

  <!--  <script type="text/javascript" th:src="@{#{webjars.jquerymin.js}}"></script>-->
  <script th:src="@{/webjars/vue/2.6.9/dist/vue.min.js}" src="../../static/js/vue.min.js"></script>
  <script th:src="@{/webjars/axios/0.17.1/dist/axios.min.js}" src="../../static/js/axios.min.js"></script>
  <script th:src="@{/js/antd.min.js}" src="../../static/js/antd.min.js"></script>
  <script th:src="@{/js/jquery.js}" src="../../static/js/jquery.js"></script>
  <script th:src="@{/js/function.js}" src="../../static/js/function.js"></script>
  <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
  <link rel="stylesheet" th:href="@{${#themes.code('cas.standard.css.path')+'/login4.css'}}"
        href="../../static/themes/login_shmh/css/login4.css"/>

  <!--/* Core CAS CSS */-->
  <!--  <link rel="stylesheet" th:href="@{${#themes.code('cas.standard.css.path')+'/login.css'}}"-->
  <!--        href="../../static/themes/login_shmh/css/login.css"/>-->
  <!--  <link rel="stylesheet" th:href="@{${#themes.code('cas.standard.css.path')+'/login2.css'}}"-->
  <!--        href="../../static/themes/login_shmh/css/login2.css"/>-->
  <!--  <link rel="stylesheet" th:href="@{${#themes.code('cas.standard.css.file')}}"-->
  <!--        href="../../static/themes/login_shmh/css/cas.css"/>-->

</head>

<body>
<div class="header">
  <div class="header_box">
    <img
      th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/logo.png'}}"
      src="../../static/themes/login_shmh/images/login/logo.png" alt=""
    >
    <span>闵行区教师专业发展数字化支持系统</span>
  </div>
</div>
<div class="bg">
  <div id="app" class="main">
    <div class="context">
      <div class="ban_left">
        <div @click="openPage('../index.jhtml')">
          <img th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/yxw.png'}}"
               src="../../static/themes/login_shmh/images/login/yxw.png"/>
          <p>研修网</p>
        </div>
        <div @click="openPage('http://ylb.ct-edu.com.cn')">
          <img th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/ylb.png'}}"
               src="../../static/themes/login_shmh/images/login/ylb.png"/>
          <p>云录播</p>
        </div>
        <div @click="openPage('http://10.107.58.34:89/main/login.aspx')">
          <img th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/zlfx.png'}}"
               src="../../static/themes/login_shmh/images/login/zlfx.png"/>
          <p>质量分析</p>
        </div>
        <div @click="openPage('http://10.107.58.121/login.html')">
          <img th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/dagl.png'}}"
               src="../../static/themes/login_shmh/images/login/dagl.png"/>
          <p>档案管理</p>
        </div>
        <div @click="openPage('http://10.107.58.218/vision/portal.jsp')">
          <img th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/dafx.png'}}"
               src="../../static/themes/login_shmh/images/login/dafx.png"/>
          <p>档案分析</p>
        </div>
        <div @click="openPage('space.jsp?do=home')">
          <img th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/sns.png'}}"
               src="../../static/themes/login_shmh/images/login/sns.png"/>
          <p>个人空间</p>
        </div>
      </div>
      <div class="log-wrap">
        <div style="text-align: right;margin-right:15px;margin-top:8px;position: relative;z-index: 0;">
          <img
            v-if="tabIndex === '1'"
            class="login-wxin"
            style="cursor: pointer;text-align:right;display: inline-block;"
            th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/icon-jiao.png'}}"
            src="../../static/themes/login_shmh/images/login/icon-jiao.png" alt=""
            @click="() => tabIndex = '2'"
          >
          <img
            v-if="tabIndex === '2'"
            class="back"
            style="cursor: pointer;text-align:right;display: inline-block;"
            th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/icon-pwd.png'}}"
            src="../../static/themes/login_shmh/images/login/icon-pwd.png" alt=""
            @click="() => tabIndex = '1'"
          >
        </div>
        <div v-show="tabIndex === '1'" class="user-login" style="margin-top:-45px;">
          <div class="log-tit">欢迎使用，请登录</div>
          <div class="login-submit">
            <p class="p-row">
              <img
                th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/user.png'}}"
                src="../../static/themes/login_shmh/images/login/user.png" alt=""
              >
              <input v-model:value="formState.username" class="input-row" type="text" placeholder="请输入用户名">
            </p>
            <p class="p-row">
              <img
                th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/key.png'}}"
                src="../../static/themes/login_shmh/images/login/key.png" alt=""
              >
              <input v-model:value="formState.password" class="input-row" placeholder="请输入密码" type="password">
            </p>
            <div class="div-checkbox">
              <div><input type="checkbox"><span style="margin-left:4px">记住密码</span></div>
              <span>找回密码</span>
            </div>
            <div class="login" @click="handleSubmit">登录</div>
          </div>
        </div>
        <div class="log-wxin" v-show="tabIndex === '2'">
          <div id="login_container"></div>
        </div>
        <form style="display: none" th:object="${credential}" method="post" action="login">
          <!--        <p class="log-tit">欢迎使用，请登录</p>-->
          <!--        <div class="alert alert-danger" th:if="${#fields.hasErrors('*')}">-->
          <!--          <span th:each="err : ${#fields.errors('*')}" th:utext="${err}">Example error</span>-->
          <!--        </div>-->
          <!--        <div class="login-submit png-bg">-->
          <!--          <div class="input-row">-->
          <!--            <p class="row-tit">&nbsp;</p>-->
          <!--            <p>-->
          <!--              <input class="lginput-txt loginname"-->
          <!--                     id="username"-->
          <!--                     name="username"-->
          <!--                     size="25"-->
          <!--                     tabindex="1"-->
          <!--                     type="text"-->
          <!--                     th:disabled="${guaEnabled}"-->
          <!--                     th:field="*{username}"-->
          <!--                     th:accesskey="#{screen.welcome.label.netid.accesskey}"-->
          <!--                     placeholder="请输入用户名"-->
          <!--                     autocomplete="off"-->
          <!--              />-->
          <!--            </p>-->
          <!--          </div>-->
          <!--        <div class="input-row">-->
          <!--          <p class="row-tit">&nbsp;</P>-->
          <!--          <p class="last">-->
          <!--            <input class="lginput-txt last loginpassword"-->
          <!--                   type="password"-->
          <!--                   id="password"-->
          <!--                   name="password"-->
          <!--                   placeholder="请输入密码"-->
          <!--                   size="25"-->
          <!--                   tabindex="2"-->
          <!--                   th:accesskey="#{screen.welcome.label.password.accesskey}"-->
          <!--                   th:field="*{password}"-->
          <!--                   autocomplete="off"/>-->
          <!--          </p>-->
          <!--        </div>-->
          <!--        <div class="login-msg login-error-msg undis">-->
          <!--          <span class="msg-bg png-bg"></SPAN>-->
          <!--          <div class="msg msg-tip">-->
          <!--            <span class="msg-con">账户名和密码不匹配</SPAN>-->
          <!--          </div>-->
          <!--        </div>-->
          <!--        <div class="word-tip clearfix">-->
          <!--          <label id="remember" onclick="javascript:triggerCheck();"-->
          <!--                 class="keep-log keep-log-check label-checkbox png-bg" for="rememberMe">-->
          <!--            <input id="rememberMe" class="keep-log-input" name="rememberMe" checked="checked" type="checkbox"><span-->
          <!--            onclick="javascript:triggerCheck();">记住密码</span>-->
          <!--          </label>-->
          <!--          <span style="margin-left: 150px;cursor: pointer;" onclick="findPsw();">找回密码</span>-->
          <!--        </div>-->
          <input type="hidden" name="refer" value="space.jsp?do=home"/>
          <input type="hidden" name="decode" value="false"/>
          <input type="hidden" name="key" value="<%=key%>"/>
          <input type="hidden" name="formhash" value="ce011a48"/>
          <input type="hidden" name="loginsubmit" value="登录"/>
          <input type="hidden" id="pswlevel" name="pswlevel" value=""/>
          <p class="log-btn">
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
            <input type="hidden" name="_eventId" value="submit"/>
            <input type="hidden" name="geolocation"/>
            <button type="submit" id="login-mail" class="login-btn login-btn1" href="javascript:login();">登录
            </button>
          </p>
          <!--        </div>-->
        </form>
      </div>

    </div>
    <div style="width:960px;color:#fff;font-size: 12px;margin:0 auto">
      友情提醒：为了您更好地使用本系统，请使用IE9及以上、火狐、谷歌、搜狗浏览器
    </div>
    <div class="div-footer">
      <img th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/icp.png'}}"
           src="../../static/themes/login_shmh/images/login/icp.png" />
      <span>沪ICP备05012047号</span>
      <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011202005321">
        <img th:src="@{${#themes.code('cas.standard.static.path')+'/images/login/guohui.png'}}"
             src="../../static/themes/login_shmh/images/login/guohui.png"/>
        <span>沪公网安备 31011202005321号</span>
      </a>
    </div>
    <div style="display: none">
      <div class="login-container">
        <div class="login">
          <a class="login-title" :class="{active:tabIndex === '1'}" @click="()=>{tabIndex = '1'}">用户登录</a>
          <a class="login-title" :class="{active:tabIndex === '2'}" @click="()=>{tabIndex = '2'}">扫码登录</a>
        </div>
      </div>
      <form method="post" style="display: none" id="tokenForm" action="login">
        <input type="hidden" name="token" id="token"/>
        <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
        <input type="hidden" name="_eventId" value="tokenSubmit"/>
        <input type="hidden" name="geolocation"/>
        <button type="submit" size="large" class="btn-red login-btn">登 录</button>
      </form>
      <a-modal
        title="请绑定mfa"
        :visible="visible"
        width="400px"
        ok-text="已绑定"
        cancel-text="取消"
        @cancel="handleCancel"
        @ok="handleOk"
      >
        <div>
          <img :src="mfaSrc"/>
        </div>
      </a-modal>
      <a-modal
        title="请绑定账号"
        :visible="wechatBindVisible"
        width="400px"
        ok-text="确定"
        cancel-text="取消"
        @cancel="handleBindCancel"
        @ok="handleBind"
      >
        <div>
          <a-input
            name="username"
            size="large" v-model="modalData.username" placeholder="请输入用户名"
            autocomplete="off"
          >
            <template #prefix>
              <a-icon type="user"/>
            </template>
          </a-input>
          <a-input-password
            name="password"
            size="large" v-model="modalData.password" placeholder="请输入密码"
            autocomplete="off"
            style="margin-top: 20px;"
          >
          </a-input-password>
        </div>
      </a-modal>
    </div>
  </div>
</div>
<script th:inline="javascript">
    //<![CDATA[
    let app = new Vue({
        el: '#app',
        data() {
            return {
                visible: false,
                wechatBindVisible: false,
                formState: {
                    username: '',
                    password: '',
                    code: ''
                },
                modalData: {
                    token: '',
                    username: '',
                    password: ''
                },
                mfaSrc: '',
                tabIndex: '1'
            }
        },
        methods: {
            async checkUsername() {
                const {username} = this.formState
                const res = await axios.post(/*[[@{/mfa/check/}]]*/ '/cas/mfa/check/'
                    + username, {})
                console.log(res)
                if (res.data.code === '1002') {
                    this.visible = true
                    const mfaSrcData = await axios.post(/*[[@{/mfa/qrcode/}]]*/ '/cas/mfa/qrcode/'
                        + username, {})

                    this.mfaSrc = mfaSrcData.data
                }
            },
            handleCancel() {
                this.visible = false
            },
            async handleOk() {
                const res = await axios.post(/*[[@{/mfa/bind/}]]*/ '/cas/mfa/bind/'
                    + this.formState.username, {})
                const {code, msg} = res.data
                this.visible = false
            },
            async handleBind() {
                const res = await axios.post(/*[[@{/wechat/bind}]]*/ '/cas/wechat/bind', this.modalData)
                const data = res.data
                if (data.success) {
                    if (this.service) {
                        window.location.href =/*[[@{/login}]]*/"/cas/login"
                            + `?token=${this.modalData.token}&service=${encodeURIComponent(this.service)}`
                    } else {
                        window.location.href =/*[[@{/login}]]*/"/cas/login"
                            + `?token=${this.modalData.token}`
                    }
                } else {
                    antd.message.error(data.message)
                }
            },
            handleBindCancel() {
                this.wechatBindVisible = false
            },
            doLogin() {

            },
            async handleSubmit() {
                const res = await axios.post(/*[[@{/mfa/login}]]*/ '/cas/mfa/login'
                    , this.formState)
                alert(JSON.stringify(res.data))
                const {code, msg, token} = res.data
                if (code === '0') {
                    this.tokenSubmit(token)
                } else if (code === '1002') {
                    this.visible = true
                    const mfaSrcData = await axios.post(/*[[@{/mfa/qrcode/}]]*/ '/cas/mfa/qrcode/'
                        + this.formState.username, {})
                    this.mfaSrc = mfaSrcData.data
                } else {
                    antd.message.error(msg)
                }
            },
            tokenSubmit(token) {
                if (token) {
                    $('#token').val(token)
                    $("#tokenForm").submit();
                }
            },
            wechatInit() {
                const service = getQueryString("service");
                const params = service ? {service: encodeURIComponent(service)} : {}
                // axios.post(/*[[@{/wechat/wechat-params}]]*/ '/cas/wechat/wechat-params', params).then(res => {
                    // const {appid, state, redirect_uri} = res.data
                    const obj = new WxLogin({
                        appid: 'wx82c196eb55991604',
                        state: '000',
                        redirect_uri: 'http://www.jypj.org/cas/login?type=wechat',
                        self_redirect: false,
                        id: "login_container",
                        scope: "snsapi_login",
                        style: ""
                    });
                // })
            },
            async wechatCallback() {
                const code = getQueryString("code");
                const state = getQueryString("state");
                const wechat_token = getQueryString("wechat_token");

                if (code && state) {
                    const {data} = await axios.post(/*[[@{/wechat/auth}]]*/ '/cas/wechat/auth', {code, state})
                    const {auth, service, token} = data || {}
                    if (!token) {
                        window.location.href =/*[[@{/login}]]*/"/cas/login"
                        return
                    }
                    if (auth) {
                        this.tokenSubmit(token)
                        // window.location.href =/*[[@{/login}]]*/"/cas/login" + `?token=${token}&service=${service}`
                        return
                    }
                    const params = {
                        type: 'wechat',
                        wechat_token: token,
                        service
                    }
                    window.location.href = /*[[@{/login}]]*/"/cas/login"
                        + '?' + $.param(params)
                    return
                }
                if (wechat_token) {
                    const {data} = await axios.post(/*[[@{/wechat/check}]]*/ '/cas/wechat/check', {token: wechat_token})
                    const {auth} = data || {}
                    if (auth) {
                        this.tokenSubmit(wechat_token)
                    } else {
                        this.modalData.token = wechat_token
                        this.wechatBindVisible = true
                    }
                }
            },
            findPsw() {
                window.location.href = "/sns/do.jsp?ac=findpswd";
            },
            openPage(url) {
                window.open(url)
            }
        },
        mounted() {
            const token = getQueryString("token");
            if (token) {
                this.tokenSubmit(token)
                return
            }
            const type = getQueryString("type");
            if (type === 'wechat') {
                this.wechatCallback()
                return;
            }
            this.wechatInit()
        }
    })
    //]]>
</script>
</body>
</html>
